<template>
    <div class="top">
      <headIndex :hindex="num" @getCat="valueChange"/>
        <div class="listTwo">
            <div class="main_cer" style="background: #ffffff;padding:20px 20px 60px">
              <!----当前位置----->
              <div class="dqwz clearfix">
                <div class="wz fl">
                  <span>当前位置</span>
                  <span>></span>
                  <span><a href="/home">首页</a></span>
                  <span>></span>
                  <span>{{firstName}}</span>
                </div>
                <div class="search_list fr clearfix">
                  <input v-model="n_input" placeholder="" class="fl" />
                  <div class="btn fr" @click="searchCont">
                    <i class="iconfont icon-sousuo"></i>
                  </div>
                </div>
              </div>
  
              <!----列表----->
              <div class="cont clearfix">
                <!----左边----->
                <div class="new_two fl">
                  <div class="xjlm">
                    <ul>
                      <div class="bt">{{ listName }}</div>
                      <li v-for="(item,index) in menu_list" :class="[status==index ? 'on' : '']"  @click="goNews(item.categoryid,index)">{{ item.categoryname }}</li>
                    </ul>
                  </div>
                  <div class="tzgg">
                    <div class="tltle">通知公告</div>
                    <ul>
                      <li class="wb2" v-for="(item,index) in noticeList"><a :href="'/article?id=' + item.infoid" target="_blank">{{item.infotitle}}</a></li>
                    </ul>
                  </div>
  
                  <div class="spxw">
                    <div class="tltle">视频新闻</div>
                    <ul v-if="flimList.length>0">
                      <li v-for="(item,index) in flimList" class="clearfix">
                        <a :href="'/article?id=' + item.infoid" target="_blank">
                           <div class="img fl">
                              <img :src="item.picurl">
                              <i class="iconfont icon-bofang1"></i>
                           </div>
                           <div class="txt wb4 fl">
                            {{item.infotitle}}
                           </div>
                        </a>
                      </li>
                    </ul>
                    <el-empty v-else description="暂无更多内容"></el-empty>
                  </div>
  
                </div>
                <!----右边----->
                <div class="list_menu fr">
                  <div class="new_list">
                    <ul v-if="contList.length > 0">
                      <li v-for="(item,index) in contList">
                        <a :href="'/article?id=' + item.infoid" target="_blank" class="flex flex-align-center">
                          <div class="flex flex-align-center">
                            <i class="iconfont icon-fangkuai"></i>
                            <div class="wz">{{item.infotitle}}</div>
                          </div>
                          <p class="time">{{item.addtime}}</p>
                          
                        </a>
                      </li>
                    </ul>
                    <el-empty v-else description="暂无更多内容"></el-empty>
                  </div>
                  <div v-if="contList.length > 0" class="page fr">
                    <div class="flex flex-pack-center">
                      <el-pagination
                        :small="true"
                        :background="true"
                        @current-change="handleSizeChange"
                        :current-page="pageindex" 
                        :page-size="pagesize" 
                        layout="slot, prev, pager, next"
                        :total="retotal"
                        >
                        </el-pagination> 
                    </div>  
                  </div>  
                </div>

              </div>
  
            </div>
        </div>
      <footIndex />
    </div>
  </template>
  <style lang="scss" scoped>
  .el-pagination.is-background.el-pagination--small .btn-next,
  .el-pagination.is-background.el-pagination--small .btn-prev,
  .el-pagination.is-background.el-pagination--small .el-pager li{
    min-width: 30px;
  }
  .el-pagination--small .btn-prev,
  .el-pagination--small .el-pager li, .el-pagination--small .el-pager li.btn-quicknext,
  .el-pagination--small .el-pager li:last-child,
  .el-pagination--small .btn-next,
  .el-pagination--small .el-pager li{
    font-size: 16px;
    line-height: 30px;
    height: 30px;
  }
  .el-pager .number {
    border-bottom: none;
  }
  .el-pager .more {
    border-bottom: none;
  }
  .el-menu{
    background: none;
  }
  .el-submenu .el-submenu__title{
    font-size: 18px;
    // color: #305792;
    height: 60px;
    line-height: 60px;
  }
  .el-submenu.is-opened .el-submenu__title{
    font-size: 18px;
    font-weight: bold;
    color: #305792;
    height: 60px;
    line-height: 60px;
  }
  .el-submenu__title i{
    font-size: 16px;
    font-weight: bold;
  }
  .el-submenu.is-opened .el-submenu__title i{
    color: #305792;
  }
  .el-menu-item{
    font-size: 18px;
    height: 60px;
    line-height: 60px;
  }
  .el-menu-item:hover{
    font-size: 18px;
    font-weight: bold;
    color: #305792;
    height: 60px;
    line-height: 60px;
    background: none;
  }
  .el-menu-item.is-active{
    font-size: 18px;
    font-weight: bold;
    color: #305792;
    height: 60px;
    line-height: 60px;
    background: none;
    .wz{
      color: #305792;
    }
  }
  .el-submenu .el-menu-item{
    font-size: 14px;
    height: 42px;
    line-height: 42px;
  }
  .el-submenu .el-menu-item:hover{
    font-size: 14px;
    height: 42px;
    line-height: 42px;
    background: #ffffff;
    border-left:3px solid #305792;
  }
  .el-submenu .el-menu-item.is-active{
    font-size: 14px;
    height: 42px;
    line-height: 42px;
    background: #ffffff;
    border-left:3px solid #305792;
    .wz{
      color: #305792;
    }
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active{
    background: none;
    color: #000000;
    font-size: 16px;
  }
  </style>
  <script setup name="list">
  import headIndex from "./components/headIndex/index.vue";
  import footIndex from "./components/footIndex/index.vue";
  // import menuTree from './components/menuTree/index.vue'
  // menuTree: () => import('./components/menuTree/index.vue')
  import { listpassInfo } from "@/api/yxzx/info";
  import { leftCategorylist } from '@/api/yxzx/home'
  export default {
    components: {
      headIndex,
      footIndex,
    },
    data() {
      return {
        n_input: '',
        contList: [],
        noticeList: [],
        flimList: [],
        status: 0,
        retotal: 0,
        pageindex: 1,
        pagesize: 16,
        reCount: 0,
        newsList: [],
        wzTitle: "",
        listId: '',
        listName: this.GetQueryString("name"),
        firstName: '',
        secondtName: '',
        activeIndex: '',      
        getId: '',
        num: 0,
        menu_list: [],
      };
    },
    created() {
      this.getMenu()     
    },
    methods: {
      // 搜索方法
      searchCont(){
        if(this.s_input == ''){
          this.$message.error('您未输入搜索内容！');
        } else {
          this.$router.push({
            path:'/search',
            query: {
              text: this.n_input
            }
          });
        }
      },
      // 左侧二级导航
      getMenu(){
        leftCategorylist(this.GetQueryString("catid")).then((response) => {
          this.menu_list = response
          this.listId = response[0].categoryid
          this.getList(this.listId)
        });
      },
      goNews(id,index){
        this.status = index
        this.listId = id
        this.getList(this.listId)
      },
      valueChange(val) {
        val.map((item,index) => {
          if (item.categoryid == this.listId) {
            this.firstName = item.categoryname
            if(this.firstName == '医院动态'){
              this.num = 1
            } else if (this.firstName == '通知公告'){
              this.num = 2
            } else if (this.firstName == '领导讲话'){
              this.num = 3
            } else if (this.firstName == '政策法规'){
              this.num = 4
            } else if (this.firstName == '军内要闻'){
              this.num = 5
            } else if (this.firstName == '科普之声'){
              this.num = 6
            } else if (this.firstName == '医教研讯'){
              this.num = 7
            } else if (this.firstName == '东总周会'){
              this.num = 8
            } else if (this.firstName == '时政论坛'){
              this.num = 11
            } else if (this.firstName == '视频新闻'){
              this.num = 12
            } else if (this.firstName == '表扬激励'){
              this.num = 15
            } else if (this.firstName == '基层风采'){
              this.num = 17
            }
          } else if (item.categoryname == '通知公告'){
            listpassInfo(item.categoryid,"",1,5).then((response) => {
              this.noticeList = response.InfoList;
            });
          } else if (item.categoryname == '视频新闻'){
            if(this.listId == item.categoryid){
              this.flimList = this.contList
            } else {
              listpassInfo(item.categoryid,"",1,5).then((response) => {
                this.flimList = response.InfoList;
              });
            }                      
          }
        })
      },
      handleSelect(val){
        this.secondtName = val.split('/')[1]
        this.getId = val.split('/')[0]
        this.getList(this.getId)
      },
      handleSizeChange(val) {
        this.pageindex = val;
        this.getList(this.listId)
      },
      getList(id) {
        listpassInfo(
          id,
          "",
          this.pageindex,
          this.pagesize
        ).then((response) => {
          this.contList = response.InfoList;
          this.retotal = response.PageInfo.recordCount;
          this.reCount = response.PageInfo.recordCount;
        });
      },
      // 获取地址栏的参数
      GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
          return decodeURI(r[2]);
        } else {
          return null;
        }
      },
  
      // 获取树形结构左侧栏目
      tree(data, name) {
        for (let i = 0; i < data.length; i++) {
          let item = data[i]
          if (item.categoryname === name) {
            return item.categoryid
          } else {
            if (item.xiajicategorylist && item.xiajicategorylist.length > 0) {
              let res = tree(item.xiajicategorylist, name)
              if (res) return res
            }
          }
        }
      }
    },
  };
  </script>
  